html, body {
  height: 100%;
  width: 100%;
}
*:not([class^='el-']) {
  box-sizing: border-box;
}
.white{
  background-color: #ffffff;
}
a{
  text-decoration: none;
}
.gray{
  background-color: #eef0f3;
}
.mr10{
  margin-right: 10px;
}
.mr20{
  margin-right: 20px;
}
.mb20{
  margin-bottom: 20px;
}
.m-lr10{
  margin-left: 10px;
  margin-right: 10px;
}
.p20{
  padding: 20px;
}
.pl20{
  padding-left: 20px;
}
.text-right{
  text-align: right;
}
.fr{
  float: right;
}
.flex{
  display: flex;
}


.flex-row{
  display: flex;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
}

/*项目竖向排列*/
.flex-col {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
}
/*flex-shrink  所有项目的flex-shrink: 1; 只有一个为0  则空间不足时，为0不缩小*/
/*项目可换行 默认不换行*/

.flex-grow {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

/*水平和垂直居中*/

.flex-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

/*水平居中*/

.flex-x-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*右对齐*/

.flex-x-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: flex-end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: center;
  justify-content: flex-end;
}

/*两端对齐*/

.flex-x-between,.flex-between {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
}

/*两侧间距相等对齐*/

.flex-x-around {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: space-around;
  -webkit-justify-content: space-around;
  -ms-flex-pack: space-around;
  justify-content: space-around;
}

/*Y轴居中*/

.flex-y-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

/*底部对齐*/

.flex-y-bottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  -ms-grid-row-align: flex-end;
  align-items: flex-end;
}

.item-end{
	 align-self: flex-end;/*单个项目底部*/
}
/*-------------------------------------*/

/*item 上使用*/

/*flex-shrink  所有项目的flex-shrink: 1; 只有一个为0  则空间不足时，为0不缩小  */

/*适合左右排 0 占绝对位置 1占满盒子 根据盒子大小变化而变化*/

.flex-grow-0 {
  min-width: 0;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.flex-grow-1 {
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

/*最小的值排在最前面*/

.order {
  order: 1;
}

/*flex-start | flex-end  | center    | baseline    | stretch;
  顶端对齐    底部对齐  中间对齐   项目的第一行文字的基线对齐。 占满y轴高度 默认值*/

.item-end {
  align-self: flex-end; /*单个项目底部*/
}

.item-center {
  align-self: center; /*单个项目居中对齐*/
}
.tips{
  margin-left: 15px;
  color: #787878;
}


/*
* 公共样式
*/
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.query-form {
  background-color: #ffffff;
  padding: 22px 20px 0;
  border-radius: 5px;
  border-bottom: 1px solid #ece8e8;
}
.base-table {
  border-radius: 5px;
  background: #ffffff;
  margin-top: 20px;
  margin-bottom: 20px;
  flex-grow: 1;
  overflow: auto;
  padding: 0px 20px;
  
  .action {
    border-radius: 5px 5px 0px 0px;
    background: #ffffff;
    padding: 20px 0px;
    border-bottom: 1px solid #ece8e8;
  }
  .pagination {
    text-align: right;
    padding: 10px;
  }
  .operate{
    display: flex;
    align-items: center;
    color: #409efc;
    cursor: pointer;
    padding: 10px 0px;
    .operate-btn{
      margin-left: 10px;
    }
    &:hover{
      color: #20a0ff;
    }
  }
}

